<template>
  啦啦啦啦
  <div class="login-view" v-if="isComponentLoaded">
    <el-button type="primary" @click="sendToModuleData">发送数据</el-button>
    <!-- <TaskForm ref="moudleRef" /> -->
    <component :is="LoginForm" ref="moudleRef" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "LoginView",
  components: {}
});


import { provide, ref, onMounted, type DefineComponent } from 'vue';
import type { ModuleInterface, SendCmd } from "./types";

import { handlePluginCommand } from '@/utils/commandHandler';
import type { AxiosRequestConfig } from 'axios';
import type { Response } from '@/mctp-api';
import { getPlatformConfig, PlatformConfig } from "@/utils/loadModulesConfig";
import { useGlobalModulesStore } from '@/store/modules/globalModules';
const store = useGlobalModulesStore();

// 2. 响应式存储组件（核心）
const LoginForm = ref<DefineComponent | null>(null);
let createLoginModule: ((sendCmd: SendCmd<any, any>, initialData: any) => ModuleInterface<any>) | null = null;
const isComponentLoaded = ref(false); // 标记组件是否加载完成，控制模板渲染
interface LoginFormInstance {
  dataEvent: (value: any) => void; // 匹配组件的 dataEvent 方法定义
}
const moudleRef = ref<(DefineComponent & LoginFormInstance) | null>(null);
const index = ref(0);

// 登录模块加载函数（支持插件命名机制）
const importMoudule = async (pluginName: string = 'default-login') => {
  try {
    // 使用模块联邦加载任务模块
    const moduleConfig: PlatformConfig = await getPlatformConfig();
    if (moduleConfig.loadExternalModules) {
      const loginModule = await import('loginModule/main');

      // 从模块中获取组件和初始化函数
      createLoginModule = loginModule.default || loginModule.createLoginModule;
      LoginForm.value = loginModule.LoginForm;
      console.log(`登录模块[${pluginName}]加载成功`, { createLoginModule, LoginForm: loginModule.LoginForm });
    }
    else {
      // ✅ 统一路径：直接指向打包后的模块资源
      const loginModuleName = store.systemModules.find(item => item.name == "登录")?.frontEnd || "mctp-modules-login";

      try {
        // 直接加载打包后的模块JS文件
        const module = await import(`../../modules/login/${loginModuleName}/${loginModuleName}.js`);

        // 加载对应的CSS样式
        const cssPath = `../../modules/login/${loginModuleName}/assets/style.css`;
        try {
          await import(cssPath);
        } catch (cssErr) {
          console.warn(`样式文件加载失败: ${cssErr}`);
        }

        createLoginModule = module.default?.createLoginModule || module.default;
        LoginForm.value = module.LoginForm || module.default?.LoginForm;
        console.log('✅ 统一模式：登录模块已加载', { loginModuleName, module });

      } catch (e) {
        console.error('❌ 模块加载失败:', e);
      }
    }

    isComponentLoaded.value = true;
  } catch (e) {
    console.error(`登录模块[${pluginName}]加载失败`, e);
  }
};

const loadModule = () => {
  if (!createLoginModule) {
    console.error("createLoginModule 未加载完成");
    return;
  }
  // 1. EventData 初始值：空对象（业务数据由后端返回，初始无需填充）
  const initialCalibData = {};

  // 2. 平台命令处理：完全转发插件传递的所有参数，对齐 createPost 逻辑
  const handleModuleCmd: SendCmd<{
    moduleId: string;
    fixedParams?: any;
    data?: Record<string, any>;
    params?: any;
    config?: AxiosRequestConfig;
  }, Response<any>> = async (moduleName, cmd, cmdParams) => {
    if (moduleName !== "LoginForm") return { code: 400, msg: "模块不匹配", data: null };

    console.log("来自插件的请求--LoginForm");

    console.log("平台接收登录指令：", cmd, cmdParams);
    // 直接调用平台的 handlePluginCommand，传递所有参数（复刻 createPost 逻辑）
    return handlePluginCommand(
      cmdParams?.moduleId || moduleName, // 模块ID（替代 createPost 的 url）
      cmdParams?.fixedParams, // 固定参数（对齐 createPost 的 fixedParams）
      cmdParams?.data, // 业务数据（对齐 createPost 的 data）
      cmdParams?.params, // URL 参数（对齐 createPost 的 params）
      cmdParams?.config // Axios 配置（对齐 createPost 的 config）
    );
  };

  // 3. 创建插件实例：完全对齐原有调用方式
  const taskModule: ModuleInterface<typeof initialCalibData> = createLoginModule(
    handleModuleCmd,
    initialCalibData
  );

  const SEND_LOGIN_CMD_KEY = "send-login-cmd"; // 协商好的字符串Key
  const GET_LOGIN_DATA_KEY = "get-login-data"; // 配套的“获取数据”Key

  provide(SEND_LOGIN_CMD_KEY, (cmd: string, cmdParams?: any) => {
    return taskModule.sendCommand(cmd, cmdParams);
  });
  // 注入“获取数据”方法（供插件调用）
  console.log("平台确认是否为响应式对象", (taskModule.eventData as any).value);
  provide(GET_LOGIN_DATA_KEY, () => taskModule.eventData);

  // 5. 手动初始化插件
  taskModule.startup();

}

onMounted(async () => {
  // 可以从路由参数、配置或props中获取插件名称

  await importMoudule();
  console.log("createLoginModule", createLoginModule, "LoginForm", LoginForm);
  loadModule();
  (moudleRef.value as any)?.dataEvent(index.value);
})


const sendToModuleData = () => {
  // setInterval(() => {
  //   index.value++;
  //   (moudleRef.value as any)?.dataEvent(index.value);
  // }, 100);

  index.value++;
  (moudleRef.value as any)?.dataEvent(index.value);

}

</script>

<style lang="scss" scoped>
.login-view {
  padding: 12px;
  height: 100%;
  overflow: scroll;
}
</style>
